
import React, { useState, useEffect } from 'react'
import { Layout, Row, Col, Button, Modal, message, Spin } from 'antd';
import QRCode from "qrcode.react";
import copy from "copy-to-clipboard";
import HeaderBox from '@/components/header'
import FooterBox from '@/components/footer'
import UserMenu from '@/components/userMenu'
import API from '@/api/api'
import coinBtc from '../../assets/img/icon/btc.png'
import coinUsdt from '../../assets/img/icon/usdt.png'
import coinEth from '../../assets/img/icon/eth.png'
import coinIpfs from '../../assets/img/icon/ipfs.png'
import './index.scss';
const { Content } = Layout;

function Wallet(props) {
    const [load, setLoad] = useState(true)
    const [rechargeload, setRechargeLoad] = useState(true)
    const [coinList, setCoinList] = useState()
    const [rechargeModal, setRechargeModal] = useState(false)
    const [address, setAddress] = useState('loading')
    const [coinName, setCoinName] = useState()
    const coinImg = { 'BTC': coinBtc, 'USDT': coinUsdt, 'ETH': coinEth, 'FIL': coinIpfs }

    useEffect(() => {
        getWallet()
    }, [])

    const getWallet = async () => {
        setLoad(true)
        let res = await API.wallet()
        if (res) {
            let list = Object.values(res.data)
            setCoinList(list)
            setLoad(false)
        } else {
            setLoad(false)
        }
    }

    const getRechange = async (name) => {
        let opt = { coinName: name }
        setRechargeLoad(true)
        let res = await API.rechargeInfo(opt)
        if (res) {
            setAddress(res.data[0].address || 'loading')
            setCoinName(res.data[0].name)
            setRechargeLoad(false)
        } else {
            setRechargeLoad(false)
        }
    }

    const showRecharge = name => {
        setRechargeModal(true)
        getRechange(name)

    }

    const cancelRechargeModal = () => {
        setRechargeModal(false)
    }

    const copyAddress = () => {
        if (copy(address)) {
            message.success('复制成功');
        } else {
            message.warning('该浏览器不支持一键复制,请手动复制');
        }
    }

    const coninItem = (value, index) => {
        return (
            <Row className="wallet-item" key={index} justify="space-between">
                <Col className="wallet-item-left" lg={18}>
                    <img src={coinImg[value.name]} />
                    <div className="wallet-balance">
                        <h3>{value.name}钱包</h3>
                        <p>可用余额：<big>{value.available}</big></p>
                    </div>
                </Col>
                <Col className="wallet-btn" lg={3}>
                    <Button type="primary" onClick={() => showRecharge(value.name)}>充值</Button>
                    <Button onClick={() => props.history.push(`/withdraw/${value.name}`)}>提现</Button>
                </Col>
                <Col className="wallet-record" lg={3}>
                    <a onClick={() => props.history.push(`/walletRecord/withdraw/${value.name}`)}>充值记录</a>
                    <a onClick={() => props.history.push(`/walletRecord/recharge/${value.name}`)}>提现记录</a>
                </Col>
            </Row >
        )
    }

    return (
        <Layout className="layout">
            <HeaderBox />
            <Content>
                <Row className="wallet main" justify="space-between">
                    <Col lg={4} md={20}>
                        <UserMenu current="3" />
                    </Col>
                    <Col className="wallet-main" lg={19} md={20}>
                        {
                            load ? <div className="load-box"><Spin /></div> :
                                coinList && Object.values(coinList).map((value, index) => {
                                    return coninItem(value, index)
                                })
                        }
                    </Col>
                </Row>
                <Modal visible={rechargeModal} onCancel={cancelRechargeModal} footer={null}>
                    <h1>充值</h1>
                    {rechargeload ? <div className="load-box"><Spin /></div> :
                        <div>
                            <Row className="wallet-qr" justify="center">
                                <QRCode
                                    value={address}
                                    size={160}
                                    bgColor='#eee'
                                    fgColor='#000'
                                />
                            </Row>
                            <Row className="wallet-address" justify="space-between" align="middle">
                                <Col>地址：{address}</Col>
                                <Col><Button type="primary" onClick={copyAddress}>复制</Button></Col>
                            </Row>
                            <Row className="wallet-tip">
                                <h3>温馨提示</h3>
                                <p>* 禁止向 {coinName}地址充值除 {coinName}之外的资产  </p>
                                <p>* 任何充入{coinName} 地址的非 {coinName} 资产将不可找回</p>
                                <p>* 使用 {coinName} 地址充值需要网络确认才能到账    </p>
                            </Row>
                        </div>
                    }
                </Modal>
            </Content>
            <FooterBox />
        </Layout>
    )
}

export default Wallet